<script lang="ts" setup>
import { h, reactive, shallowRef } from 'vue'
import XyIcon, { XyIconRender } from '@/components/XyIcon'
const formList = reactive<FormList>([
  {
    label: '开关',
    prop: 'switch1',
    type: 'switch',
    value: '1',
    data: [
      { label: '选项1', value: '1' },
      { label: '选项2', value: '2' }
    ],
    onChange() {},
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '显示文字',
    prop: 'switch4',
    type: 'switch',
    value: '1',
    isText: true,
    data: [
      { label: '选项1', value: '1' },
      { label: '选项2', value: '2' }
    ],
    onChange() {},
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '开关内显示文案',
    prop: 'switch2',
    type: 'switch',
    value: '1',
    width: 80,
    isText: true,
    inlinePrompt: true,
    data: [
      { label: '选项1', value: '1' },
      { label: '选项2', value: '2' }
    ],
    onChange() {},
    rule: [{ required: true, trigger: 'blur' }]
  },
  {
    label: '开关图标',
    prop: 'switch3',
    type: 'switch',
    value: '1',
    data: [
      {
        label: '选项1',
        value: '1',
        icon: shallowRef(XyIconRender('ep/user-filled')),
        actionIcon: h(XyIcon, { icon: 'ep:edit' })
      },
      { label: '选项2', value: '2', icon: h(XyIcon, { icon: 'ep:edit' }), actionIcon: h(XyIcon, { icon: 'ep:delete' }) }
    ],
    onChange() {},
    rule: [{ required: true, trigger: 'blur' }]
  }
])
const submitForm = (formData: any) => {
  console.log(formData)
}
</script>
<template>
  <XyAddForm isCard :formList="formList" @submit-form="submitForm" />
</template>
